<template>
	<view :style="{height:height-100+'px',paddingTop: (navH+46)+'px'}">
		<view class='nav' :style="{paddingTop:navH+'px'}">
			<view class="nav-back" style="border-width:0;width: 100px;position: fixed">
			<view @click="goIndex">
				<text class="iconfont" style="font-size:40upx;">&#xe66e;</text>
			</view>
		</view>
			<view class='nav-title'>
				{{team.name}}
			</view>
		</view>
		<view class="input-wrap">
			<view class="input-icon">
				<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe641;</text>
			</view>
			<input v-model="key" placeholder="请输入关键词" @focus="searchFlag=true"
				   @confirm="saveKey" maxlength="10" confirm-type="search" placeholder-class="placeholder"/>
			<view @click="blur" v-if="searchFlag"  style="width:100upx;text-align:right;line-height:60upx;color: #2DA4FD;font-size: 26upx">取消</view>
		</view>
		<history v-if="searchFlag" :keys="keys" @search="search"/>
		<view v-else>
			<view class="hot-text" style="margin-top: 100upx;display: flex;justify-content: space-between">
				热门标签
				<span @click="goUrl('tags')" style="font-size: 26upx;color: #B7B7B7;padding-right: 18upx">全部标签》</span>
			</view>
			<view class="hot-wrap">
				<span @click="selTag(item)" class="hot-item" v-for="item in tags">{{item.name}}({{item.contentCount}})</span>
			</view>
			<view class="content">
				<image @click="goUrl('knowledge')" v-for="item in list"  class="content-image"
						src="http://n.sinaimg.cn/news/transform/700/w1000h500/20190722/e14c-iaantfi6168637.jpg">
				</image>
				<button :loading="loading==1" size="mini" class="load-but" @click="loser">
					{{loading==1?'正在加载':loading==-2?'加载失败，点击重试':''}}
				</button>
			</view>
		</view>

	</view>
</template>

<script>
	import API from '../../common/api.js';
	import history from '../components/history.vue';

	export default {
		components:{
			history
		},
		data() {
			return {
				navH:0,
				team:uni.getStorageSync('team')?JSON.parse(uni.getStorageSync('team')):{name:'团队',id:0},
				searchFlag:false,
				key:'',
				keys:uni.getStorageSync('keys')?JSON.parse(uni.getStorageSync('keys')):{},
				loading:0,
				tags:[],
				list:[1,1,1,1],
			}
		},
		onLoad(){
			this.navH=this.navHeight()
			if(this.team){
				console.log(this.team,777777)
				this.getTags()
			}
			// this.getData(true)
		},
		onReachBottom(){
			// if([-1,-2].indexOf(this.loading)<0){
			// 	this.getData()
			// }
		},
		methods:{
			search(key){
				uni.navigateTo({
					url: '../index/knowledge?key='+key
				});
			},
			del(index){
				if(index<0){
					return
				}
				if(index==100){
					this.keys[this.team.id]=[]
				}else{
					this.keys[this.team.id].splice(index,1)
				}
				uni.setStorage({
					key: 'keys',
					data: JSON.stringify(this.keys),
					success: function () {
					}
				});
			},
			blur(){
				this.searchFlag=false
			},
			getTags(){
				API.tagsList({
					"limit": 10,
					"managerId": this.team.id,
					"page": 0}).then(res=>{
					console.log(res,789)
					if(res.status==200){
						this.tags=res.data
					}else{
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '请求失败！',
							showCancel: false,
						});
					}
				})
			},
			selTag(item){
				uni.navigateTo({
					url: '../index/knowledge?tagsId='+item.id+'&tagsName='+item.name
				});
			},
			saveKey(){
				console.log(1111)
				if(!this.key){
					uni.showToast({
						title: '请输入关键字',
						icon: 'none'
					})
				}else{
					let id=this.team.id
					if(!this.keys[id]){
						this.keys[id]=[]
					}
					if(this.keys[id].indexOf(this.key)>-1){
						uni.navigateTo({
							url: '../index/knowledge?key='+this.key
						});
					}else{
						if(this.keys[id].length>9){
							this.keys[id].splice(9,1)
						}
						this.keys[id].unshift(this.key)
						uni.setStorage({
							key: 'keys',
							data: JSON.stringify(this.keys),
							success:()=> {
								uni.navigateTo({
									url: '../index/knowledge?key='+this.key
								});
							}
						});
					}
				}
			},
			loser(){
				if(this.loading==-2){
					this.getData()
				}
			},
			goIndex(){
				uni.reLaunch({
					url: '../index/index'
				});
			},
			goUrl(url){
				uni.navigateTo({
					url: '../index/'+url
				});
			},
			getData(){
				this.loading=1
				setTimeout(()=>{
					this.list.push(1)
					this.list.push(1)
					this.list.push(1)
					this.list.push(1)
					this.list.push(1)
					if(this.list.length==5){
						this.loading=-2
					}
				},2000)
				return
				uni.showModal({
					title: '提示',
					content: '加载失败，请重试',
					showCancel: false,
				});
				this.loading=-2
			},
		}
	}
</script>

<style>
	button:after {
		border-width: 0;
	}
	.input-wrap{
		display: flex;
		border-radius: 0px;
		box-shadow: 0px 2px 2px 0px rgba(240, 240, 240, 1);
		padding: 20upx 30upx;
		width: calc(100% - 60upx);
		background: white;
		position: fixed;
	}
	.input-icon{
		padding:8upx 3% 0 4%;
		background:rgba(243, 244, 246, 1);
		border-bottom-left-radius: 8upx;
		border-top-left-radius: 8upx;
	}
	input{
		width: 90%;
		height: 60upx;
		line-height: 40upx;
		border-bottom-right-radius: 8upx;
		border-top-right-radius: 8upx;
		background-color: rgba(243, 244, 246, 1);
	}
	.placeholder{
		color: rgba(143, 145, 151, 1);
		font-size: 26upx;
		font-family: PingFangSC-regular;
	}
	.hot-text{
		padding:30upx 0 0 30upx ;
		color: rgba(16, 16, 16, 1);
		font-size: 40upx;
		font-family: PingFangSC-bold;
		margin-bottom: 20upx;
	}
	.hot-wrap{
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
	}
	.hot-item{
		padding:10upx 20upx;
		margin:20upx 20upx 0 0;
		line-height: 40upx;
		border-radius: 8upx;
		background-color: rgba(246, 246, 246, 1);
		text-align: center;
		color: rgba(50, 60, 72, 1);
		font-size: 26upx;
		font-family: PingFangSC-regular;
	}
	.content{
		padding:60upx 30upx 0upx 30upx;
	}
	.content-image{
		width: 100%;
		height: calc(39.6vw - 23.76upx);
		border-radius: 4upx;
	}
</style>
